<template>
    <Dialog :show="dialogComnfig.show" :buttons="dialogComnfig.buttons" width="1000px" :showCancel="false"
        @close="dialogComnfig.show = false">
        <div class="dialog-panel">
            <div class="bg">
                <img src="../../assets/login_bg.png" alt="">
            </div>
            <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="80px" @submit.prevent
                class="login-register">
                <div class="tab-panel">
                    <div :class="[opType == 1 ? 'active' : '']" @click="showPanel(1)">登录</div>
                    <el-divider direction="vertical"></el-divider>
                    <div :class="[opType == 0 ? 'active' : '']" @click="showPanel(0)">注册</div>
                </div>
                <el-form-item prop="email">
                    <el-input v-model.trim="formData.email" placeholder="请输入邮箱" clearable :maxlength="150" size="large">
                        <template #prefix>
                            <span class="iconfont icon-account"></span>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password" v-if="opType == 1">
                    <el-input v-model.trim="formData.password" placeholder="请输入密码" show-password :maxlength="150"
                        size="large">
                        <template #prefix>
                            <span class="iconfont icon-password"></span>
                        </template>
                    </el-input>
                </el-form-item>
                <div v-if="opType == 0">
                    <el-form-item prop="nickName">
                        <el-input v-model.trim="formData.nickName" placeholder="请输入昵称" clearable :maxlength="150"
                            size="large">
                            <template #prefix>
                                <span class="iconfont icon-account"></span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="registerPassword">
                        <el-input v-model.trim="formData.registerPassword" placeholder="请输入密码" show-password
                            :maxlength="150" size="large">
                            <template #prefix>
                                <span class="iconfont icon-password"></span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="comfirmPassword">
                        <el-input v-model.trim="formData.comfirmPassword" placeholder="请确认密码" show-password
                            :maxlength="150" size="large">
                            <template #prefix>
                                <span class="iconfont icon-password"></span>
                            </template>
                        </el-input>
                    </el-form-item>
                </div>
                <el-form-item prop="checkCode">
                    <div class="check-code-panel">
                        <div class="input">
                            <el-input v-model.trim="formData.checkCode" placeholder="请输入验证码" :maxlength="150"
                                size="large">
                                <template #prefix>
                                    <span class="iconfont icon-checkcode"></span>
                                </template>
                            </el-input>
                        </div>
                        <img src="" alt="">
                    </div>
                </el-form-item>
                <!--input输入-->
                <el-form-item label="" prop="">
                    <el-button type="primary" @click="doSubmit" class="login-btn" size="large">
                        <span v-if="opType == 0">注册</span>
                        <span v-if="opType == 1">登录</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </Dialog>

</template>

<script setup>
import Dialog from '@/components/Dialog.vue';
import { getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    change: {
        type: Function,
        default: () => { }
    }
})
const dialogComnfig = ref({
    show: props.show,
    buttons: []
})
watch(() => props.show, (newVal) => {
    dialogComnfig.value.show = true;
    // console.log(`便化成${newVal}`);
    // console.log(dialogComnfig.value.show);
})
onMounted(() => {
    console.log(props.change);
    
})
const formDataRef = ref();
const formData = ref({
    email: '',
    password: '',
    checkCode: '',
    nickName: '',
    registerPassword: '',
    comfirmPassword: ''
})

//确认密码校验函数
const checkPassword = (rule, value, callback) => {
    if (value !== formData.value.registerPassword) {
        console.log(rule);

        callback(new Error(rule.message));
    } else {
        callback();
    }
}
// 表单验证规则
const rules = ref({
    email: [
        { required: true, message: '请输入邮箱' },
        {
            validator: proxy.verify.email,
            message: '请输入正确的邮箱'
        }
    ],
    nickName: [{ required: true, message: '请输入昵称' }],
    password: [{ required: true, message: '请输入密码' }],
    registerPassword: [
        { required: true, message: '请输入密码' },
        {
            validator: proxy.verify.password,
            message: '密码只能是数字，字母，特殊字符 8-18位'
        }
    ],
    comfirmPassword: [
        { required: true, message: '请输入确认密码' },
        {
            validator: checkPassword,
            message: '两次输入的密码不一致'
        }
    ],
    checkCode: [{ required: true, message: '请输入验证码' }]
})
const opType = ref(1);
const showPanel = (type) => {
    opType.value = type;
    resetForm()
}

const resetForm = () => {
    nextTick(() => {
        formDataRef.value.resetFields();
        formData.value = {}
    })
}
const doSubmit = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        let params = {};
        Object.assign(params, formData.value);
        let result = await proxy.Request({
            url: api,
            params,
        });
        if (!result) {
            return;
        }
    });
}
</script>

<style scoped lang="scss">
.dialog-panel {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .bg {
        width: 450px;
        height: 580px;
        overflow: hidden;

        img {
            width: 100%;
        }
    }
}

.login-register {
    width: 350px;

    .tab-panel {
        margin: 10px auto;
        display: flex;
        width: 130px;
        font-size: 18px;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;

        .active {
            color: var(--blue2);
        }
    }

    .no-account {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .login-btn {
        width: 100%;
    }

    .bottom-btn {
        margin-bottom: 0px;
    }
}

.check-code-panel {
    display: flex;
    align-items: center;
    width: 100%;

    .input {
        flex: 1
    }

    .right-panel {
        margin-left: 5px;
        cursor: pointer;
    }
}
</style>